<template>
  <div class="home1">
    <!--------------- 页头部分 --------------------->
    <div class="header">
      <Header_dlog />
    </div>
    <!--------------- 页头部分 结束 --------------------->
    <!--------------- 导航部分 --------------------->
    <div class="nav">
      <Navs_dlog />
    </div>
    <!--------------- 导航部分 结束 --------------------->
    <!--------------- 页面主体部分 --------------------->
    <div class="main">
      <!-- -----------------------轮播图----------------------------- -->
      <div class="block">
        <span class="demonstration"></span>
        <el-carousel height="500px">
          <el-carousel-item v-for="item in 4" :key="item"></el-carousel-item>
        </el-carousel>
      </div>
      <div class="sidebar">
        <!-- sidebar占满banner部分，sidebar分为两部分左边是a，右边是标签对应的div，
        当hover下面a标签的时候，显示对应的div，可以通过v-show或者v-if控制-->
        <div class="sidebar_left">
          <!-- <a href="#"
          >-->
          <router-link to="/sidebar_dlog">杂志/娱乐</router-link>
          <a href="#">计算机/网络</a>
          <a href="#">音乐/影视</a>
          <a href="#">教辅/教材</a>
          <a href="#">农林/建筑</a>
          <a href="#">自然科学/医学</a>
          <a href="#">经济/管理</a>
          <a href="#">心理学/法律</a>
          <a href="#">传记/古籍</a>
          <a href="#">军事/历史</a>
        </div>
        <div class="sidebar_right">
          <div class="right_datas" v-for="item in lists" :key="item.title">
            <img :src="item.images" alt />
            <span class="title">{{ item.title }}</span>
          </div>
        </div>
      </div>
      <!-- -----------------------轮播图 结束----------------------------- -->
    </div>
    <!--------------- 页面主体部分 结束 --------------------->
    <!--------------- 栏目部分 --------------------->
    <div class="column">
      <div class="column_left">
        <Column_left_dlog />
      </div>
      <div class="column_right">
        <a href>
          <img src="..\images\Home01.jpg" alt />
        </a>
        <a href>
          <img src="..\images\Home02.jpg" alt />
        </a>
        <a href>
          <img src="..\images\Home03.jpg" alt />
        </a>
        <a href>
          <img src="..\images\Home04.jpg" alt />
        </a>
        <a href>
          <img src="..\images\Home05.jpg" alt />
        </a>
      </div>
    </div>
    <!--------------- 栏目部分 结束--------------------->
    <div class="hr">
      <img src="..\images\hr01.png" alt />
    </div>
    <div class="content-right">
      <div class="lin" v-for="(item, index) in hearos" :key="item.title" @click="toGoods(index)">
        <router-link to="/details">
          <img :src="item.images" />
          <div class="title">{{ item.title }}</div>
          <div class="intro">{{ item.intro }}</div>
          <div class="price">{{ item.price }}</div>
        </router-link>
        <router-view />
      </div>
    </div>
    <!--------------- 页尾部分 --------------------->
    <div class="fotter">
      <Fotter_dlog />
    </div>
    <div class="buttom w">
      <hr class="w" />
      <div class="wyxk w">
        <p>
          信息网络传播视听节目许可证：0910453417 网络文化经营许可证 沪网文【2019】385404-274号 广播电视节目制作经营许可证：（沪）字第01248号 增值电信业务经营许可证 沪B2-20100043
          互联网ICP备案：沪ICP备3544302172号-3 出版物经营许可证 沪批字第U654699 号 互联网药品信息服务资格证 沪-非经营性-2016-054143 营业性演出许可证 沪市文演（经）00-2253
          违法不良信息举报邮箱：help@TianQi.com |违法不良信息举报电话：4006265432000
        </p>
        <hr class="w" />
      </div>
    </div>
    <!--------------- 页尾部分 结束--------------------->
    <!-- 侧边栏 -->
    <div class="menus">
      <ul>
        <li>
          <a href="#">
            <img src="../images/信息.png" title="给我们留言" />
          </a>
        </li>
        <li>
          <a href="#">
            <img src="../images/问号.png" title="有疑问，联系我们" />
          </a>
        </li>
        <li>
          <a href="#">
            <img src="../images/手机.png" title="欢迎致电" />
          </a>
        </li>
        <li>
          <a href="#">
            <img src="../images/微信.png" title="关注公众号" />
          </a>
        </li>
      </ul>
    </div>
    <!-- 返回顶部 -->
    <el-backtop target=".page-component__scroll .el-scrollbar__wrap" :bottom="100">
      <div
        style="{
        height: 100%;
        width: 100%;
        background-color: #f2f5f6;
        box-shadow: 0 0 6px rgba(0,0,0, .12);
        text-align: center;
        line-height: 40px;
        color: #1989fa;
      }"
      >UP</div>
    </el-backtop>
  </div>
</template>
<script>
import Header_dlog from "@/components/Header_dlog.vue";
import Navs_dlog from "@/components/Navs_dlog.vue";
import Column_left_dlog from "@/components/Column_left_dlog.vue";
import Fotter_dlog from "@/components/Fotter_dlog.vue";
// import Sidebar_dlog from "../components/Sidebar_dlog.vue";

export default {
  name: "Home",
  // 组件
  components: {
    Header_dlog,
    Navs_dlog,
    Column_left_dlog,
    Fotter_dlog,
    // Sidebar_dlog,
  },
  data() {
    return {
      lists: [
        {
          title: "天奇 FOLD",
          images: require("../images/del1.png"),
        },
        {
          title: " Ultra",
          images: require("../images/del7.png"),
        },
        {
          title: "TianQi系列",
          images: require("../images/del1.png"),
        },
        {
          title: "天奇古诗 Pro",
          images: require("../images/del2.png"),
        },
        {
          title: " 网络文学",
          images: require("../images/del3.png"),
        },
        {
          title: "哈利波特",
          images: require("../images/del4.png"),
        },
        {
          title: "简爱",
          images: require("../images/del5.png"),
        },
        {
          title: "欧赔核心思维",
          images: require("../images/del6.png"),
        },
        {
          title: "史丹利",
          images: require("../images/del1.png"),
        },
        {
          title: "真伪查询",
          images: require("../images/del2.png"),
        },
        {
          title: "天奇图书VIP",
          images: require("../images/del3.png"),
        },
        {
          title: "洛丽塔",
          images: require("../images/del4.png"),
        },
        {
          title: "金融时报",
          images: require("../images/del5.png"),
        },
        {
          title: "巴菲特",
          images: require("../images/del6.png"),
        },
        {
          title: "海豹突击队",
          images: require("../images/del1.png"),
        },
        {
          title: "天奇云服务",
          images: require("../images/del2.png"),
        },
        {
          title: "股权战争",
          images: require("../images/del3.png"),
        },
      ],
    };
  },
};
</script>

<style scoped>
* {
  margin: 0;
  padding: 0;
}
body {
  background-color: #f3f5f7;
  /* height: 3000px; */
}
.w {
  width: 1200px;
  margin: auto;
}
.home {
  position: relative;
}
li {
  list-style: none;
}

a {
  text-decoration: none;
}

.home1 {
  /* width: 1688px; */
  width: 100%;
  /* 总盒子 */
  /* height: 1255px; */
}
.header {
  width: 100%;
  height: 35px;
  /* 设置最小宽度 */
  min-width: 1030px;
}
.nav {
  width: 1350px;
  height: 90px;
  /* 水平居中 */
  margin: 0 auto;
  /* 设置最小宽度 */
  min-width: 1350px;
}
.main {
  /* 父相 */
  position: relative;
  /* display: flex;  弹性布局无法脱离文档流*/
  width: 1350px;
  height: 500px;
  margin: 0 auto;
  /* 设置最小宽度 */
  min-width: 1350px;
}
/* ---------------轮播图 */
.block {
  position: absolute;
  width: 100%;
  height: 100%;
  /* background-color: #000; */
  /* object-fit: fill; */
}
.sidebar {
  display: flex;
  width: 100%;
  z-index: 2;
  /* 子绝 */
  position: absolute;
}
.el-carousel__item:first-of-type {
  /* 轮播背景图 */
  /* 平铺 靠左显示 */
  background: url("../images/banner_02.png") no-repeat;
  /* 图片会把盒子的一边撑满  contain和cover*/
  background-size: cover;
}
.el-carousel__item:nth-of-type(2) {
  /* background-color: #daabd2; */
  /* 轮播背景图 */
  /* 平铺 靠左显示 */
  background: url("../images/banner_01.png") no-repeat;
  /* 图片会把盒子的一边撑满  contain和cover*/
  background-size: cover;
}
.el-carousel__item:nth-of-type(3) {
  /* background-color: #daabd2; */
  /* 轮播背景图 */
  /* 平铺 靠左显示 */
  background: url("../images/banner_03.png") no-repeat;
  /* 图片会把盒子的一边撑满  contain和cover*/
  background-size: cover;
}
.el-carousel__item:last-of-type {
  /* background-color: #daabd2; */
  /* 轮播背景图 */
  /* 平铺 靠左显示 */
  background: url("../images/banner_04.png") no-repeat;
  /* 图片会把盒子的一边撑满  contain和cover*/
  background-size: cover;
}

/* ---------------轮播图 end*/
.sidebar_left {
  width: 230px;
  /* outline: 1px solid red; */
}
/* ' '后代选择器，~兄弟选择器，>子代选择器 */
.sidebar_left:hover ~ .sidebar_right {
  display: block;
}
.sidebar_right {
  /* outline: 1px solid red; */
  display: flex;
  flex-wrap: wrap;
  display: none;
  width: 600px;
  margin-left: -10px;
  /* height: 400px; */
  background-color: rgb(255, 255, 255);
}
.sidebar_right .right_datas {
  display: flex;
  align-items: center;
  /* outline: 1px solid red; */
  /* display: flex; */
  width: 185px;
  height: 55px;
  /* background-color: skyblue; */
  float: left;
  padding-left: 14px;
  padding-top: 10px;
}
.sidebar_right .right_datas img {
  /* outline: 1px solid red; */
  width: 40px;
}
.sidebar_right .right_datas .title {
  padding-left: 0;
  font-size: 14px;

  line-height: 55px;
  color: #000;
}
.sidebar_left a {
  display: block;
  width: 200px;
  height: 50px;
  background-color: rgba(0, 0, 0, 0.3);
  font-size: 14px;
  line-height: 50px;
  padding: 0 10px;
  color: #fff;
  /* 去除下划线 */
  text-decoration: none;
  /* 首行缩进 */
  text-indent: 2em;
}
.sidebar a:hover {
  background-color: skyblue;
  /* max-width: 2000px; */
}
.column {
  width: 1350px;
  height: 170px;
  margin: 0 auto;
  margin-top: 20px;
  min-width: 1350px;
}
.column_left {
  float: left;
  width: 230px;
  min-width: 230px;
  height: 100%;
}
.column_right {
  float: left;
  width: 1120px;
  min-width: 1120px;
  height: 100%;
}
.column_right img {
  float: left;
  width: 201.5px;
  height: 170px;
  padding-left: 22.4px;
}
.hr {
  width: 1350px;
  margin: 0 auto;
  margin-top: 20px;
}
.hr img {
  width: 1350px;
}
hr {
  margin-top: 10px;
}
.buttom {
  float: inherit;
  margin-top: 115px;
  margin-bottom: 20px;
}
.wyxk {
  font-size: 12px;
  color: #666;
}
/* 侧边栏 */
.menu {
  /* position: relative; */
  position: fixed;
  top: 100px;
  left: 5px;
  width: 70px;
  margin: 90px 0;
  cursor: pointer;
  background-color: #ccc;
  box-shadow: 1px 1px 10px 1px rgba(0, 0, 0, 0.6);
  border-radius: 15px;
  font-size: 14px;
  text-align: center;
  z-index: 2;
}
.menu li {
  height: 50px;
  line-height: 50px;
  border-bottom: 1px ridge gray;
}
.menu li a {
  color: gray;
}
.menu .mkzl {
  border-bottom: 0px;
}
.menu a {
  color: #000;
}
.menu li a:hover {
  color: orange;
}
.menu li:hover {
  border-radius: 10px;
}
.menus {
  position: fixed;
  top: 100px;
  right: 5px;
  height: 280px;
  width: 55px;
  margin: 90px 0;
  cursor: pointer;
  background-color: #ccc;
  box-shadow: 1px 1px 10px 1px rgba(0, 0, 0, 0.6);
  border-radius: 15px;
  font-size: 12px;
  text-align: center;
  z-index: 2;
}
.menus ul li:hover {
  color: skyblue;
  border-radius: 10px;
}
.menus img {
  width: 36px;
  margin: 17px 0;
}
</style>